<!DOCTYPE html>
<html>
  <header>
    <meta charset="uft-8">
    <title>数据分析</title>
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <style type="text/css">
      body {
        position: relative;
        height: 100%;
        overflow: hidden;
        background: linear-gradient(to right, rgb(28, 146, 210), rgb(242, 252, 254));
      }
      /*滚动条*/
      ::-webkit-scrollbar {width: 6px;height:6px;}
      ::-webkit-scrollbar-track-piece{background-color: #eee;margin: -2px;}
      ::-webkit-scrollbar-thumb{background: rgb(202, 9, 9);box-shadow: 0 1px 3px 0 rgba(0,0,0,0.15);border-radius: 8px;}
      ::-webkit-scrollbar-thumb:vertical:hover{background: #bbb}
      ::-webkit-scrollbar-thumb:horizontal:hover{background: #bbb}
      p,h1,h2,a {
          cursor: pointer;
      }
      #prebox {
          width: 500px;
          position: fixed;
          bottom: 10px;
          right: 10px;
          z-index: 999;
          padding: 10px;
          background: #1E211F;
          color: #fff;
          border-radius: 6px;
          pointer-events: auto;
          -webkit-overflow-scrolling: touch;
      }
      #pre {
          height: 800px;
          overflow: auto;
          font-size: 14px;
      }
      .content-box{
        position: absolute;
        top: 50%;
        left: 50%;
        width: 500px;
        background-color: rgba(0,0,0,0.15);
        margin-left: -200px;
        margin-top: 200px;
        text-align: center;
        border-radius: 10px;
      }
      .content-box-title{
        color: #fff;
      }
      .content-box-input{
        width: 230px;
        height: 28px;
        margin-bottom: 10px;
        border-style: none;
        border-radius: 5px;
      }
      .content-box-btn{
        width: 230px;
        height: 28px;
        margin-bottom: 10px;
        border-style: none;
        background-color: skyblue;
        border-radius: 10px;
      }
      a{
        color: #fff;
      }
    </style>
    <script src="/build/0.1.0/smart.sync.js"></script>
    <script>
      smart.init('xxx', {
        local_storage: {
          type: 'localStorage'
        },
        SPA: {
          is: false,
          mode: 'hash'
        },
       // pageview: false,
        debug: true,
        loaded: function(sdk) {
          sdk.register_event_super_properties({test:'事件通用属性'});
        }
      });


      // 若关闭了 PV 自动触发，则使用下面的代码
      // smart.track_pv();
      // smart._.innerEvent.on('singlePage:change', function(eventName, urlParams) {
      //   smart.track_pv();
      //   console.log(urlParams)
      // });

      smart.time_event('buy');
    </script>
  </header>
  <body>
      <div style="clear:both;" class="content-box">
          <h1 class="content-box-title">Data_Analysis_Login</h1>
          <div>
            <input id="userId" placeholder="请输入用户名称" class="content-box-input">
          </div>
          <div>
            <input class="content-box-input" id="userpwd" placeholder="请输入用户密码">
          </div>
          <div>
            <button class="content-box-btn">登录</button>
          </div>
          <div>
            <button class="content-box-btn">退出</button>
          </div>
          <div>
            <button class="content-box-btn">测试用户自定义事件-购买</button>
          </div>
          <div>
            <button class="content-box-btn">设置用户自定义属性</button>
          </div>
          <a href='#22' >单页面1（hash）</a>
          <a href='#33' >单页面2（hash）</a>
      </div>
  </body>

  <script>
    document.getElementsByTagName('button')[0].onclick = function(e) {
      smart.login(document.getElementById('userId').value);
    }
    document.getElementsByTagName('button')[1].onclick = function(e) {
      smart.logout();
    }
    document.getElementsByTagName('button')[2].onclick = function(e) {
      smart.track_event("buy",{"price":"￥123", "id": 'xxxx-xxxx-xxxx'});
    }
    document.getElementsByTagName('button')[3].onclick = function(e) {
      smart.user.set({ "name": "陈泽亮","country":"中国","province":"浙江省","city":"杭州市","age":"100","gender":"男", "niu":"自定义用户属性" });
    }
  </script>
</html>